<template>
  <view class="box">
    <el-table
      style="width: 100%"
      v-loading="loading"
      size="small"
      :data="tableData"
      :header-cell-style="{ background: '#f3f8fe', color: '#515a6e' }"
    >
      <el-table-column prop="goods_thumb" label="商品图片" min-width="60">
        <template slot-scope="scope" @click="previewImage(scope.row)">
          <el-avatar
            style="padding-left: 4px"
            shape="square"
            :size="50"
            :src="scope.row.goods_thumb"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_desc"
        label="商品名称"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="view_count" label="浏览量" min-width="80">
        <template slot-scope="scope">{{ scope.row.view_count || 0 }}</template>
      </el-table-column>
      <!-- 访客数 -->
      <el-table-column prop="visitor_count" label="访客数" min-width="80">
        <template slot-scope="scope">{{
          scope.row.visitor_count || 0
        }}</template>
      </el-table-column>
      <!-- 加购件数 -->
      <el-table-column prop="add_cart_count" label="加购件数" min-width="80">
        <template slot-scope="scope">{{
          scope.row.add_cart_count || 0
        }}</template>
      </el-table-column>
      <!-- 支付件数 -->
      <el-table-column prop="pay_count" label="支付件数" min-width="80">
        <template slot-scope="scope">{{ scope.row.pay_count || 0 }}</template>
      </el-table-column>
      <!-- 支付金额 -->
      <el-table-column prop="pay_money" label="支付金额" min-width="80">
        <template slot-scope="scope">
          {{ vk.pubfn.priceFilter(scope.row.pay_money) || "0.00" }}
        </template>
      </el-table-column>
      <!-- 毛利率 -->
    <!--  <el-table-column prop="profit_rate" label="毛利率(%)" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.profit_rate || "0.00" }}%
        </template>
      </el-table-column> -->

      <!-- 访客-支付转化率 -->
      <el-table-column
        prop="visitor_pay_rate"
        label="访客-支付转化率(%)"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.visitor_pay_rate || "0.00" }}%
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="onclick(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </view>
</template>

<script>
var vk = uni.vk;

export default {
  components: {},
  data() {
    return {
      tableData: [
        // {
        //   thumb: "",
        //   title: "",
        //   view_count: 0,
        //   visitor_count: 0,
        //   add_cart_count: 0,
        //   pay_count: 0,
        //   pay_money: 0,
        //   profit_rate: 0,
        //   visitor_pay_rate: 0,
        // },
      ],
      loading: false,
    };
  },
  methods: {
    async init(e) {
      this.loading = true;
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.queryGoodRank",
        data: { value: e },
      });
      this.loading = false;
      this.tableData = res.data;
    },
    onclick(item) {
      this.$emit("previewGoods", item);
    },
    //预览图片
    previewImage(item) {
      console.log(item);
      uni.previewImage({
        urls: [item.goods_thumb],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 8px 16px;
  min-height: 200px;
}

/deep/ .cell {
  padding-left: 14px;
}
</style>
